<template>
  <view class="container">
		<!-- 条件查询 -->
		<view class="top-select" :style="{ position: selectPosition }" >
			<view :class="['ts-text', conColor ? 'conColor' : '']" @click="toggle('con')">
				{{ activeCon.name || '距离最近' }}
				<uni-icons type="bottom" size="14" class="tst-icon" :color="conColor ? '#CF1A1B' : ''"/>
			</view>
			<view :class="['ts-text', kmColor ? 'kmColor' : '']" @click="toggle('km')">
				{{ activeKm.name || '全部' }}
				<uni-icons type="bottom" size="14" class="tst-icon" :color="kmColor ? '#CF1A1B' : ''"/>
			</view>
			<view :class="['ts-text', tagColor ? 'tagColor' : '']" @click="toggle('tag')">
				门店服务
				<uni-icons type="bottom" size="14" class="tst-icon" :color="tagColor ? '#CF1A1B' : ''"/>
			</view>
			<!-- <view v-if="mapShow" class="ts-dtdw" @click="gotoMapLocation">
				<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/ic_ditudaohang.png" mode="" ></image>
				<text class="tsd-test">地图</text>
			</view> -->
		</view>
		
		<!-- 数据内容 -->
		<view class="main-wrap" v-if="data.length" :style="{ padding: mainWrapPadding + 'px' }" >
			<view class="mw-content" v-for="item in data" :key="item.id" @click="handleDetail(item)">
				<view class="mwc-top">
					<view class="mwct-img">
						<image :src="item.photo1 || goods_default_4" mode="aspectFill"></image>
					</view>
					<view class="mwct-info">
						<view class="mwcti-title">
							<text class="mwctit-name">
								{{ item.name }}
							</text>
							<text class="mwctit-tag" v-if="item.lastCostFlag === 1">上次消费</text>
						</view>
						<view class="mwcti-eval">
							<!-- <uni-rate readonly :max="1" :size="16" :value="1" allow-half activeColor="#CF1A1B"/> -->
							<image class="mwctie-image" src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/icon_kayouzhijia2.png" mode=""></image>
							<text :class="['mwctie-text', item.score && 'text-color']">{{ item.score && item.score.toFixed(1) || '暂无评分' }}</text>
							<text class="mwctie-flag"> | </text>
							<text class="mwctie-comment">{{ item.evaluationNum || 0 }}条评论</text>
						</view>
						<view class="mwcti-tagList" v-if="item.tagList && item.tagList.length">
							<view class="mwctit-item" v-for="tag in item.tagList" :key="tag.tagId">
								<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/icon_gouxuan2.png" mode=""></image>
								<text class="mwctiti-label">{{ tag.tagName }}</text>
							</view>
						</view>
						<view class="mwcti-tagList" v-else>
							<text class="mwctiti-label">暂无</text>
						</view>
						<!-- <view class="mwcti-discount">
							<view class="mwctid-label" v-for="label in item.promotionLabel" :key="label.labelName">{{ label.labelName }}</view>
						</view> -->
					</view>
				</view>
				<view class="mwc-bottom">
					<view class="mwcb-left">
						<view class="mwcti-palce">
							<image class="mwctip-image" src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/icon_dizhi2.png" mode=""></image>
							<text class="mwctip-km"> {{ item.distance || 0 }}km</text>
							<text class="mwctie-flag"> | </text>
							<text class="mwctip-site" :style="{ width: item.distance ? '40vw' : '50vw' }"> {{ item.address }}</text>
						</view>
					</view>
					<view class="mwcb-right">
						<view class="mwcb-item" v-for="con in relationList" :key="con.flag" @click.stop="handleAction(con, item)">
							<view class="mwcbi-image"><image :src="con.icon" mode="scaleToFill"></image></view>
							<!-- <text class="mwcbi-title">{{ con.title }}</text> -->
						</view>
					</view>
				</view>
			</view>
			<view class="mw-loadmore-text" v-if="showLoadMore">{{ loadMoreText }}</view>
		</view>
		<view v-if="isEmpty" class="empty">
		 <image src="../../../static/empty.png"></image>
		 <text>无数据</text>
		</view>
		
		<!-- 弹出层 -->
			<view
				class="popup-view"
				v-if="popupShow"
				:style="{
					top: popupTop + 'px',
					position: popupPosition,
					boxShadow: !propsPopupShow ? '0rpx 20rpx 20rpx 2rpx rgba(0,0,0,0.1)': none
					}"
			>
				<view class="popup-content" :style="{ padding: type !== 'tag' ? '0 32rpx' : '26rpx 32rpx' }">
					<view class="pc-list" :style="{ display: type !== 'tag' ? 'block' : 'flex' }">
						<view
							:class="[type !== 'tag' ? 'pc-text' : 'pc-tag', tagSelectList.includes(item.value) ? 'pc-tag-select' : '' ]"
							v-for="item in popupList"
							:key="item.value"
							@click="handleSelect(item)"
						>
							{{ item.name }}
						</view>
					</view>
					
					<view class="pc-tag-btn" v-if="type === 'tag'">
						<view class="ptc-reset" @click.stop="handleTagReset">重置</view>
						<view class="ptc-confirm" @click.stop="handleTagConfirm">确定</view>
					</view>
				</view>
		</view>
			<view class="popup-shadow" v-if="popupShadow && propsPopupShow" @click="handlePopupShadow" :style="{ zIndex: popupShadowIndex }"></view>
  </view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import QQMapWX from '@/lib/qqmap-wx-jssdk.js'
	import goods_default_4 from '@/static/goods_default_4.png'
	
  export default {
		props: {
			keyword: {
				type: String,
				default: ''
			},
			top: {
				type: String,
				default: '64'
			},
			selectPosition: {
				type: String,
				default: 'fixed'
			},
			mainWrapPadding: {
				type: String,
				default: '100rpx 16rpx 0'
			},
			popupPosition: {
				type: String,
				default: 'fixed'
			},
			popupTop: {
				type: String,
				default: '64'
			},
			popupShadowIndex: {
				type: Number,
				default: 0
			},
			propsPopupShow: {
				type: Boolean,
				default: true
			},
			mapShow: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			// 监听点击的tabBar
			getTabBarIndex(getTabBarIndex){
				const { longitude, latitude } = this.getNowLocation
				this.init()
					// tabBar为门店
				if(getTabBarIndex === 1 && longitude && latitude){
					this.initData()
					this.handleGetTagListData()
				}
			}
		},
    data() {
      return {
				goods_default_4,
				popupShow: false,
				popupShadow: false,
				popupList: [],
				activeCon: {},
				activeKm: {},
				conList: [
					{ name: '距离最近', value: 1},
					{ name: '评分最高', value: 2},
				],
				kmList: [
					{ name: '全部', value: null},
					{ name: '20km', value: 20},
					{ name: '10km', value: 10},
					{ name: '5km', value: 5},
				],
				tagList: [],
				type: null,
				conColor: false,
				kmColor: false,
				tagColor: false,
				tagSelectList: [],	// 选中的标签
				// 数据内容
				data: [],
				loadMoreText: "加载中...",
				showLoadMore: false,
				total: 0,
				formDatas: {
					pageNum: 1,
					pageSize: 10,
					keyword: '',
					cityCode: null,
					cityLng: null,
					cityLat: null,
					nowLat: null,
					nowLng: null,
					distance: null,
					sortType: 1,
					tagIds: [],
					//     "nowLat": 22.54846,
					//     "nowLng": 114.06455,
				},
				relationList: [
					{ icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/icon_daohang3.png', title: '开启导航', flag: 'navigation'},
					{ icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/icon_dianhua3.png', title: '电话联系', flag: 'phone'},
				],
				isEmpty: false,
				mapDisFun: null,
				
				isRequest: true, // 用于判断是否调用接口
      }
    },
		computed: {
			...mapGetters('global', ['getTabBarIndex', 'getSystemInfo', 'getLocation', 'getNowLocation'])
		},
    methods: {
			async handleGetTagListData(){
				const res = await this.$request({
					method: 'GET',
					url: '/terminal-serve-center/app/cars/storeTagSelect'
				})
				this.tagList = res && res.datas && res.datas.length && res.datas.reduce((pre, cur) => {
					const obj = {
						name: cur.tagName,
						value: cur.tagId,
					}
					pre.push(obj)
					return pre
				}, [])
			},
			gotoMapLocation(){
				uni.navigateTo({
					url: '/storePack/list/mapLocation'
				})
			},
			handlePopupShadow(){
				this.popupShow = false
				this.popupShadow = false
			},
			handleDetail(item){
				const {  longitude, latitude } = this.getNowLocation
				uni.navigateTo({
				  url: `/storePack/detail/detail?terminalId=${item.id}&longitude=${longitude}&latitude=${latitude}`
				})
			},
			handleAction(con, item){
				if(con.flag === 'phone'){
					this.$emit('triggerShow')
					// 区分设备
					if(uni.getSystemInfoSync().osName === 'ios'){
						uni.makePhoneCall({
							phoneNumber: item.phone
						})
					}else {
						uni.showModal({
							title: "拨打电话",
							content: item.phone,
							confirmText: "确认",
							cancelText: "取消",
							success: res => {
								if(res.confirm){
									uni.makePhoneCall({
										phoneNumber: item.phone
									})
								}
							}
						})
					}
				} else {
					console.log(item)
					uni.openLocation({
						latitude: item.lat,
						longitude: item.lng,
						name: item.name,
						address: item.address,
					});
				}
			},
			handleTagConfirm(){
				this.tagColor = this.tagSelectList.length > 0
				this.formDatas.tagIds = this.tagSelectList
				
				this.data = []
				this.total = 0
				this.formDatas.pageNum = 1
				this.popupShow = false
				this.popupShadow = false
				this.initData()
			},
			handleTagReset(){
				this.tagSelectList = []
				this.tagColor = false
				this.formDatas.tagIds = []
				this.data = []
				this.total = 0
				this.formDatas.pageNum = 1
				this.popupShow = false
				this.popupShadow = false
				this.initData()
			},
			handleSelect(item){
				if(this.type === 'tag'){
					if(!this.tagSelectList.includes(item.value)){
						this.tagSelectList.push(item.value)
					}else {
						this.tagSelectList = this.tagSelectList.filter(i => i !== item.value)
					}
				} else {
					if(this.type === 'con'){
						this.activeCon = item
						this.conColor = true
					}else if(this.type === 'km'){
						this.activeKm = item
						this.kmColor = true
					}
					this.data = []
					this.total = 0
					this.formDatas.pageNum = 1
					this.popupShow = false
					this.popupShadow = false
					this.initData()
				}
			},
      toggle(type) {
				if(type === this.type){
					this.popupShow = !this.popupShow
					this.popupShadow = !this.popupShadow
					this.type = ''
				}else {
					this.popupShow = true
					this.popupShadow = true
				}
					
				this.type = type
				if(type === 'con'){
					this.popupList = this.conList.filter(i => i.value !== this.activeCon.value)
				}else if(type === 'km'){
					this.popupList = this.kmList
				} else {
					this.popupList = this.tagList
				}

      },
			init(){
				this.formDatas.pageNum = 1
				this.total = 0
				this.data = []
				this.activeCon = this.conList[0]
				this.activeKm = this.kmList[0]
				this.conColor = false
				this.kmColor = false
				this.tagColor = false
				this.popupShow = false
				this.popupShadow = false
				this.isEmpty = false
			},
			async initData(){
				if(!this.isRequest){
					return false
				}
				uni.showLoading({
					title: '加载中...'
				})
				const {  cityCode ,longitude, latitude } = this.getLocation
				const {  longitude: nowLng, latitude: nowLat } = this.getNowLocation
				this.formDatas.cityCode = cityCode 
				this.formDatas.cityLng = longitude 
				this.formDatas.cityLat = latitude
				this.formDatas.nowLng = nowLng
				this.formDatas.nowLat = nowLat
				this.isRequest = false
				// console.log(this.formDatas)
				const res = await this.$request({
					url: '/api-user/new-new-terminal/shopList',
					data: {
						...this.formDatas,
						sortType: this.activeCon.value || 1,
						distance: this.activeKm.value || null,
						keyword: this.keyword,
					}
				}).catch((res) => {
					this.isRequest = true
					this.init()
				})
						
				this.total = res.datas.count
				this.data = this.data.concat(res.datas.data)
				this.isEmpty = this.total === 0
				uni.stopPullDownRefresh();
				uni.hideLoading()
				
				setTimeout(() => {
					this.isRequest = true
				}, 500)
			},
			// 调用腾讯SDK获取当前位置距离目标所需的路线信息
			mapDis(flongitude, flatitude, tlongitude, tlatitude){
				const qqmapsdk = new QQMapWX({
					key: this.$mapKey
				})
				qqmapsdk.direction({
					mode: 'driving',
					from: {
						longitude: flongitude,
						latitude: flatitude,
					},
					to: {
						longitude: tlongitude,
						latitude: tlatitude
					},
					 success: function (res) {
						 return res.result.routes[0].distance
					 },
					 fail: function (error) {
						 console.error('error', error);
					 },
				})
			}
    },
		onReachBottom() {
			if (this.data.length >= this.total) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}
			this.showLoadMore = true;
			this.formDatas.pageNum += 1
			this.initData()
		},
		onPullDownRefresh() {
			this.data = []
			this.formDatas.pageNum = 1
			this.initData();
		},
		onShow() {
			// 页面出现在前台时执行
			// this.init()
			// this.initData()
		},
		onHide() {
			// 页面从前台变为后台时执行
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
			// this.$refs.popup.close()
		},
  }
</script>

<style lang="scss" scoped>
.container {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.65);
	background-color: #ffffff;
	// 条件查询
	.top-select {
		// position: fixed;
		z-index: 9;
		width: 100vw;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 60rpx;
		color: #333333;
		// height: 44px;
		// line-height: 44px;
		background-color: #ffffff;
		// border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		.tst-icon {
			margin-left: 8rpx;
		}
		
		// 选中时颜色
		.conColor, .kmColor, .tagColor {
			color: $uni-primary;
		}
		
		.ts-dtdw {
			display: flex;
			align-items: center;
			image {
				width: 22px;
				height: 22px;
				margin-right: 8rpx;
			}
		}
	}
	// 弹出层
	.popup-content {
		padding: 0 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.pc-list {
			flex-wrap: wrap;
			.pc-text {
				height: 44px;
				line-height: 44px;
				border-bottom: 1px solid rgba(0, 0, 0, 0.08);
				padding-left: 32rpx;
				&:nth-last-child(1){
					border-bottom: none;
				}
			}
			.pc-tag {
				box-sizing: border-box;
				padding: 12rpx 24rpx;
				border-radius: 32rpx;
				font-size: 12px;
				color: #262626;
				background-color: #F2F2F2;
				margin: 0 20rpx 20rpx 0;
			}
			.pc-tag-select {
				background-color: rgba(243, 38, 10, 0.1);
				color: #F3260A;
			}
		}

		.pc-tag-btn {
			margin-top: 114rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 24rpx;
			.ptc-reset, .ptc-confirm {
				padding: 20rpx 130rpx;
				text-align: center;
				border-radius: 200rpx;
				font-size: 14px;
				box-sizing: border-box;
			}
			.ptc-reset {
				background-color: #ffffff;
				color: #323233;
				border: 1px solid #DCDEE0;
			}
			.ptc-confirm {
				background-color: #F3260A;
				color: #ffffff;
				border: 1px solid #F3260A;
			}
		}
	}
	
	// 数据内容
	.main-wrap {
		// 文字颜色
		.text-color {
			color: $uni-primary;
		}
		.mw-content {
			padding-top: 24rpx;
			padding-bottom: 20rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.08);
			.mwc-top {
				display: flex;
				.mwct-img image {
					width: 176rpx;
					height: 176rpx;
					border-radius: 8rpx;
				}
				.mwct-info {
					display: flex;
					flex-direction: column;
					// justify-content: space-between;
					font-size: 12px;
					margin-left: 20rpx;
					flex: 1;
					overflow: hidden;
					.mwctie-flag {
						margin: 0 8rpx 0 12rpx;
						color: rgba(0, 0, 0, 0.35);
					}
					// 标题
					.mwcti-title {
						display: flex;
						align-items: center;
						font-size: 16px;
						color: rgba(0, 0, 0, 0.85);
						.mwctit-name {
							display: inline-block;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							flex: 1;
							text-shadow: 0 0 0.1px currentcolor;
						}
						.mwctit-tag {
							font-size: 12px;
							display: inline-block;
							color: $uni-primary;
							// border: 1px solid $uni-primary;
							border-radius: 2px;
							padding: 2rpx 4rpx;
							margin-left: 18rpx;
							width: 54px;
						}
					}
					// 评分
					.mwcti-eval {
						display: flex;
						align-items: center;
						margin-top: 16rpx;
						font-size: 13px;
						.mwctie-image {
							width: 112rpx;
							height: 28rpx;
						}
						.mwctie-text {
							margin-left: 8rpx;
							text-shadow: 0 0 0.1px currentColor;
							color: #999999;
						}
						.mwctie-comment {
							color: #999999;
						}
					}
					// 优惠
					.mwcti-discount {
						display: flex;
						.mwctid-label {
							color: rgba(255, 123, 123, 1);
							border: 1px solid rgba(255, 123, 123, 1);
							background-color: #ffefef;
							padding: 4rpx 14rpx;
							margin-right: 8rpx;
							border-radius: 4px;
						}
					}
					// 门店服务标签
					.mwcti-tagList {
						max-height: 68rpx;
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						margin-top: 16rpx;
						overflow: hidden;
						color: #7A6948;
						font-size: 12px;
						.mwctit-item {
							display: flex;
							align-items: center;
							margin-right: 24rpx;
							float: left;
							image {
								width: 20rpx;
								height: 20rpx;
							}
							.mwctiti-label {
								margin-left: 8rpx;
								// color: #7A6948;
								// font-size: 12px;
							}
						}
					}
				}
			}
			
			.mwc-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #FAFAFA;
				border-radius: 16rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				.mwcb-left {
					// 地址
					.mwcti-palce {
						display: flex;
						align-items: center;
						.mwctip-image {
							width: 20rpx;
							height: 24rpx;
							margin-right: 8rpx;
						}
						.mwctie-flag {
							margin: 0 8rpx 0 12rpx;
							color: rgba(0, 0, 0, 0.35);
						}
						.mwctip-site {
							overflow: hidden;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
				.mwcb-right {
					display: flex;
					.mwcb-item {
						display: flex;
						align-items: center;
						padding: 30rpx 0 20rpx;
						margin-right: 28rpx;
						&:nth-last-child(1){
							margin-right: 0;
						}
						.mwcbi-image {
							width: 64rpx;
							height: 64rpx;
							border-radius: 50%;
							background-color: #ffffff;
							display: flex;
							justify-content: center;
							align-items: center;
							box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.05);
							image {
								width: 28rpx;
								height: 28rpx;
							}
						}

					}
				}
			}
		}
		
		// 加载中、
		.mw-loadmore-text {
			text-align: center;
			padding: 10px;
		}
	}

	.empty {
		width: 100%;
		height: 90vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image {
			width: 220px;
			height: 180px;
		 }
		text {
			font-size: 30rpx;
			color: rgba(0,0,0,0.45);
			line-height: 30rpx;
		}
	}

	// 弹出层
	.popup-view {
		// position: fixed;
		max-height: 60vh;
		overflow-y: auto;
		left: 0;
		z-index: 10000;
		width: 100vw;
		background-color: #ffffff;
	}
	.popup-shadow {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.4);
	}
}
</style>
